<template>
	<view class="novelBox">
		<!-- 	<headComponent :navTitle="bookName" :fontColor="fontColor" :isBack="true" :selectBackground="background">
		</headComponent> -->
		<view class="topFiexdBox">
			<view class="leftBack">
				<image src="/static/image/leftNovel.png" mode="" @click="handBack"></image>
				<text v-if="catalogueList.length>0"
					:style="{color:'#aaaa7f'}">{{catalogueList[currentChapterIndex].name?catalogueList[currentChapterIndex].name.split("-H-")[0]:'异常'}}</text>
			</view>
		</view>
		<view class="mainBox" :style="{backgroundColor:background}">
			<!-- 主内容 -->
			<view class="content"
				:style="{fontSize:fontSize+'px',color:fontColor,lineHeight:lineHeightList[lineHeightIndex]+'px',height:contentHeight+'px',letterSpacing:letterSpace+'px'}"
				@click="handelCoordinate">
				<!-- 一章定位分页显示 -->
				<view v-for="(item,index) in chaptersArr" class="realOneHtml"
					:style="{left:item.left,zIndex:chaptersArr.length-index,transition:'left .6s ease',backgroundColor:background}"
					:key="index">
					<view class="splitBox">
						<view class="childBox" :style="{transform:item.transform}" v-html="item.text">
						</view>
					</view>
				</view>
				<!-- 底层真正的内容容器 -->
				<view class="realTwoHtml">
					<scroll-view :scroll-y="false" class="scroll-Y">
						<view class="hbh_smart"
							:style="{fontSize:fontSize+'px',lineHeight:lineHeightList[lineHeightIndex]+'px',letterSpacing:letterSpace+'px'}"
							v-html="novelContent">
						</view>
					</scroll-view>
				</view>
				<view class="realTwoHtml">
					<scroll-view :scroll-y="false" class="scroll-Y">
						<view class="nextChapter"
							:style="{fontSize:fontSize+'px',lineHeight:lineHeightList[lineHeightIndex]+'px',letterSpacing:letterSpace+'px'}"
							v-html="nextChapterContent.text">
						</view>
					</scroll-view>
				</view>
				<view class="realTwoHtml">
					<scroll-view :scroll-y="false" class="scroll-Y">
						<view class="hbh_smart3"
							:style="{fontSize:fontSize+'px',lineHeight:lineHeightList[lineHeightIndex]+'px',letterSpacing:letterSpace+'px'}"
							v-html="novelContent3">
						</view>
					</scroll-view>
				</view>

			</view>

			<!-- 底部状态信息栏 -->
			<view class="endText">
				<view class="endLeft">
					{{chaptersArr.length>0?chaptersArr[currentPgeNumber].index:0}}/{{chaptersArr.length>0?chaptersArr[currentPgeNumber].totalPageNum:0}}
				</view>
				<view class="endRight">
					<text>{{currentTime}}</text>
					<view class="ectrle" v-if="phoneElectric!=0">
						<view class="realLight" :style="{width:`${phoneElectric}%`}">

						</view>
					</view>
				</view>
			</view>
			<!-- 更多设置 -->
			<uni-popup ref="popup" :mask-click="false">
				<view class="popup-content" :style="{color:fontColor,background:background}"
					:class="{ 'popup-height': type === 'left' || type === 'right' }">
					<view class="topBox">
						<view class="off">
							<text @click="closePopup">关闭</text>
						</view>
						<view class="font">
							<text>字体大小:</text>
							<image v-if="fontSize > 12" src="/static/image/novelDetail/loseheight.png"
								mode="" @click="changeFontSize('-')"></image>
							<image v-if="fontSize == 12" src="/static/image/novelDetail/losewhite.png"
								mode=""></image>
							<text>{{fontSize}}</text>
							<image v-if="fontSize == lineHeightList[0]"
								src="/static/image/novelDetail/addwhite.png" mode=""></image>
							<image v-if="fontSize < lineHeightList[0]"
								src="/static/image/novelDetail/addheight.png" mode=""
								@click="changeFontSize('+')"></image>
						</view>
						<view class="font">
							<text>字体间距:</text>
							<image v-if="letterSpace > 1" src="/static/image/novelDetail/loseheight.png"
								mode="" @click="changeLetterSpace('-')"></image>
							<image v-if="letterSpace == 1" src="/static/image/novelDetail/losewhite.png"
								mode=""></image>
							<text>{{letterSpace}}</text>
							<image v-if="letterSpace == 5" src="/static/image/novelDetail/addwhite.png"
								mode=""></image>
							<image v-if="letterSpace < 5" src="/static/image/novelDetail/addheight.png"
								mode="" @click="changeLetterSpace('+')"></image>
						</view>
						<view class="font2">
							<text>上下间距:</text>
							<image v-if="lineHeightIndex !=0 "
								src="/static/image/novelDetail/loseheight.png" mode=""
								@click="changeLineHeight('-')"></image>
							<image v-if="lineHeightIndex == 0"
								src="/static/image/novelDetail/losewhite.png" mode=""></image>
							<text>{{lineHeightList[lineHeightIndex]}}</text>
							<image v-if="lineHeightIndex == 2"
								src="/static/image/novelDetail/addwhite.png" mode=""></image>
							<image v-if="lineHeightIndex != 2"
								src="/static/image/novelDetail/addheight.png" mode=""
								@click="changeLineHeight('+')"></image>
						</view>
						<view class="twoBtn">
							<text>亮度:</text>
							<slider style="flex:1;" setp="10" activeColor="#e3e3e3"
								backgroundColor="#6a6a6a" block-size="20" :value="screenLight"
								@changing="sliderChange" min="0" max="100" show-value />
						</view>
						<view class="bcg">
							<text>背景色：</text>
							<view class="bcg_right">
								<view class="bcg_color" v-for="(item,index) in colorList" :key="index"
									:style="{background:item,border:item==background?'2rpx solid #9c9c9c':'none'}"
									@click="handelColor(item)">
								</view>
							</view>

						</view>
					</view>
				</view>
			</uni-popup>
			<!-- 目录 -->
			<u-popup zIndex="10075" :show="show" mode="bottom" @close="close" @open="open" round="30">
				<view>
					<view class="" style="height:calc(100vh / 1.2);">
						<Catalogue :novel_id="novel_id" :background="background"
							:readProcessNumebr="readProcessNumebr" :authorName="authorName"
							:fileNameId="fileNameId" :totalNumber="totalNumber" @send="send" />
					</view>
				</view>
			</u-popup>
		</view>
		<!-- 顶层功能栏 -->
		<view class="Card" :style="{color:fontColor,backgroundColor:background}" v-show="fixedShow">
			<view class="child" v-for="(item,index) in cardList" :key="index" @click="handel(index)">
				<image :class="'hbh'+index" :src="item.icon" mode="">
				</image>
				<text>{{item.text}}</text>
			</view>
		</view>

	</view>
</template>

<script>
	import SDTime from "silly-datetime";
	import Catalogue from "@/components/catalogue/catalogue.vue"
	import {
		app_getNovelCatalogue,
		app_getNovelChapterContent
	} from "@/api/novelDetail/index.js"
	import fileApi from "@/uni_modules/hbh-fileIo/js_sdk/index.js"
	export default {
		data() {
			return {
				cardList: [{
					text: "目录",
					icon: "/static/image/novelDetail/catalogue.png"
				}, {
					text: "夜间",
					icon: "/static/image/novelDetail/night.png"
				}, {
					text: "日间",
					icon: "/static/image/novelDetail/daylight.png"
				}, {
					text: "更多设置",
					icon: "/static/image/novelDetail/setting.png"
				}], //功能栏列表选项
				colorList: ["#c6b2c6", "#a3be9f", "#f7f7ba", "#d5cabd"], //可选背景色
				lineHeightList: [25, 30, 40], //可选行高
				chaptersArr: [], //章节分割页数组1
				chaptersArr2: [], //章节分割页数组2
				chaptersArr3: [], //章节分割页数组3
				catalogueList: [], //小说目录
				cus: 0,
				currentChapter: 0,
				showPage1: true,
				type: 'bottom', //控制更多设置弹窗方向
				background: "#fff", //初始阅读背景色
				fontColor: "#000", //初始字体颜色
				screenLight: 35, //初始屏幕亮度
				fixedShow: false, //功能栏的开关
				timer: null, //计时器实时获取电量和时间
				phoneElectric: 0, //手机电量
				currentTime: "", //底部当前时间
				bookName: "", //顶部导航栏标题
				fileNameId: "", //小说数字目录如34566676
				novelContent: "", //展示区域的小说内容
				nextChapterContent: {
					chapter_id: "",
					text: "",
					can: false,
					totalPageNum: 0,
					splitData: []
				}, //下一章节内容
				novelContent3: "", //展示区域的小说内容3
				scrollTop: 0, //小说滚动内容盒初始位置
				old: { //防止不同层错误
					scrollTop: 0
				},
				show: false, //目录弹窗开关
				currentFullPath: "", //最新阅读章节路径

				pictureBase64: "", //小说封面
				totalNumber: "", //总字数
				authorName: "", //作者名
				isCors: false, //控制切换章节过渡效果错乱，在切换时禁止过渡哦，目前先这么优化，后面想办法

				//
				lineHeightIndex: 0, //默认行高下标
				letterSpace: 2, //字体间距
				fontSize: 16, //字体大小
				nextLeft: 'calc(100% + 30rpx)',
				nextZindex: 50,
				lastLeft: 'calc(-100% - 30rpx)',
				lastZindex: 51,
				isLoad: true, //是否可以切换章节
				//强者归来，重新洗牌
				novel_id: "", //小说id
				currentChapterId: "", //当前章节id
				contentHeight: 600, //阅读页内容高
				read_width: 0, //阅读页内容宽度
				currentChapterIndex: 0, //最新章节下标
				currentPgeNumber: 0, //当前章节当前页码下标
				cacheChapeterIndexList: [0, 1, 2], //缓存几张,就是
				currentCacheIndex: 0, //当前缓存下标
				catalogue: [], //目录
			};
		},
		computed: {
			//提示
			readProcess() {
				return `${this.currentPgeNumber+1}/${this.chaptersArr.length}`
			},
			//当前章节页数阅读进度
			readProcessNumebr() {
				return (((this.currentPgeNumber + 1) / this.chaptersArr.length) * 100).toFixed(1) + '%'
			}
		},
		components: {
			Catalogue //目录组件
		},
		async onLoad(option) {
			this.novel_id = option.novel_id
			//初始化阅读大小
			this.initBoxHeight()
			//获取小说目录
			let catalogueRes = await this.getNovelCatalogue()
			this.catalogue = catalogueRes
			if (this.catalogue.length == 0) {
				//目录为空，不用看了
				return
			}
			//获取小说第一章节内容
			this.currentChapterId = this.catalogue[0].chapter_id
			this.nextChapterContent.chapter_id = this.catalogue[1].chapter_id
			let contentInfo = await this.getNovelChapterContent(this.currentChapterId, 'cur')
			let next_contentInfo = await this.getNovelChapterContent(this.nextChapterContent.chapter_id, 'next')
			if (contentInfo.staus == 'fail') {
				return
			}
			//计算内容分页
			this.read_width = contentInfo.width
			this.chaptersArr = this.chapterSplitPage(contentInfo.height, this.novelContent,'cur')
			this.nextChapterContent.splitData = this.chapterSplitPage(next_contentInfo.height, this
				.nextChapterContent.text,'next')
			this.nextChapterContent.totalPageNum = this.nextChapterContent.splitData.length
			console.log(this.nextChapterContent)
			//开启计时器实时获取手机电量及时间
			this.timer = setInterval(() => {
				this.getLevel()
			}, 1000)

			//获取历史屏幕亮度
			if (uni.getStorageSync("SCREENLIGHT")) {
				uni.setScreenBrightness({
					value: uni.getStorageSync("SCREENLIGHT") / 100,
					success: () => {
						this.screenLight = uni.getStorageSync("SCREENLIGHT")
					}
				});
			} else {
				//获取屏幕亮度
				uni.getScreenBrightness({
					success: (res) => {
						this.screenLight = parseInt(res.value * 100)
					}
				});
			}
			//获取历史阅读背景色
			if (uni.getStorageSync("BACKGROUNDCOLOR")) {
				this.background = uni.getStorageSync("BACKGROUNDCOLOR")
			}
			//获取历史字体颜色
			if (uni.getStorageSync("Color")) {
				this.fontColor = uni.getStorageSync("Color")
			}
			//获取历史字体大小
			if (uni.getStorageSync("FontSize")) {
				this.fontSize = uni.getStorageSync("FontSize")
			}
			//获取历史字体间距
			if ((uni.getStorageSync('lineHeightIndex') - 0) >= 0) {
				this.lineHeightIndex = uni.getStorageSync('lineHeightIndex') - 0
			}
			//获取历史上下行间距
			if (uni.getStorageSync("letterSpace")) {
				this.letterSpace = uni.getStorageSync("letterSpace")
			}

			plus.key.addEventListener("keydown", (e) => {
				switch (e.keyCode) {
					case 24: //volumeupbutton  
						this.fixedShow = false
						this.lastPage()
						break;
					case 25: //volumedownbutton  
						this.fixedShow = false
						this.nextPage()
						break;
				}
			});
			//防止长按音量键出现系统音量
			plus.key.addEventListener("longpressed", function(e) {})
		},
		//页面卸载
		onUnload() {
			//清除计时器防止内存异常
			clearInterval(this.timer)
			this.timer = null
			//销毁音量监听
			plus.key.removeEventListener("longpressed", () => {})
			plus.key.removeEventListener("keydown", () => {})
		},
		methods: {
			//获取章节内容
			getNovelChapterContent(chapter_id, type) {
				return new Promise((reslove, reject) => {
					app_getNovelChapterContent({
						chapter_id
					}).then((res) => {
						if (type == 'next') {
							this.nextChapterContent.text = res.data[0].chapterContent
						} else {
							this.novelContent = res.data[0].chapterContent
						}
						//底层内容渲染出来了，通过总高计算定位每一页位置
						this.$nextTick(() => {
							const query = uni.createSelectorQuery().in(
								this);
							query.select('.hbh_smart').fields({
								size: true,
								scrollOffset: true
							}, data => {
								reslove({
									staus: "sucess",
									width: data
										.width,
									height: data
										.height
								})

							}).exec();
						})
					}).catch((err) => {
						reslove({
							staus: "fail"
						})
					})
				})

			},
			//获取章节目录
			getNovelCatalogue() {
				return new Promise((reslove, reject) => {
					app_getNovelCatalogue({
						pageNum: 1,
						pageSize: 10,
						novel_id: this.novel_id
					}).then((res) => {
						reslove(res.data)
					}).catch((err) => {
						reslove([])
					})
				})
			},
			send() {

			},
			handBack() {
				uni.navigateBack()
			},
			//初始化内容高度及行高
			initBoxHeight() {
				let info = uni.getSystemInfoSync()
				if (info.windowHeight >= 780) {
					this.contentHeight = 680
					this.lineHeightList = [20, 34, 40]
				} else if (info.windowHeight > 700 && info.windowHeight < 780) {
					this.contentHeight = 600
					this.lineHeightList = [25, 30, 40]
				} else { //<600
					this.contentHeight = 500
					this.lineHeightList = [20, 25, 50]
				}
			},
			//初始计算每章可以分割成多少页
			chapterSplitPage(screenHeight, text,type) {
				let splitArr = []
				let splitNum = Math.ceil(screenHeight / this.contentHeight)
				for (let i = 0, k = splitNum; i < splitNum; i++) {
					splitArr.push({
						left: "0px",
						transform: `translateY(-${i*this.contentHeight}px)`,
						index: i + 1,
						totalPageNum:splitNum,
						text,
						type
					})
				}
				return splitArr
			},
			//左减上一页
			lastPage() {
				if (this.currentPgeNumber == 0) {
					uni.showToast({
						icon: "none",
						title: `当前为第${this.currentChapterIndex+1}章第${this.currentPgeNumber+1}页`
					})
				} else {
					this.currentPgeNumber -= 1
					this.chaptersArr.forEach((item, index) => {
						if (index < this.currentPgeNumber) {
							item.left = -this.read_width + 'px'
						} else {
							item.left = "0px"
						}
					})

					console.log(this.chaptersArr)
				}

			},
			//右加下一页
			nextPage() {
				// if (this.currentPgeNumber == this.chaptersArr.length - 1) {
				// 	this.chaptersArr.forEach((item, index) => {
				// 		if (item.chapterIndex == this.currentChapterIndex)
				// 			if (index <= this.currentPgeNumber) {
				// 				item.left = -this.read_width + 'px'
				// 			} else {
				// 				item.left = "0px"
				// 			}
				// 	})
				// 	uni.showToast({
				// 		icon: "none",
				// 		title: `需要加载第${this.currentChapterIndex+1}章了`
				// 	})
				// 	return
				// }
				console.log(this.chaptersArr[this.currentPgeNumber])
				if(this.chaptersArr[this.currentPgeNumber].type=='next'){
					
				}
				this.currentPgeNumber += 1
				this.chaptersArr.forEach((item, index) => {
					if (item.chapterIndex == this.currentChapterIndex)
						if (index < this.currentPgeNumber) {
							item.left = -this.read_width + 'px'
						} else {
							item.left = "0px"
						}
				})
				
				if (this.currentPgeNumber >= 2) {
					// console.log(this.currentPgeNumber)
					let addItem2 = JSON.parse(JSON.stringify(this.nextChapterContent.splitData[0]))
					addItem2.left = "0px"
					this.chaptersArr.push(addItem2)
					// setTimeout(()=>{
					// 	this.chaptersArr.shift() //删除第一个
					// },500)
				}
				//从缓存数据下一个抽一个出来
				// switch (this.currentCacheIndex) { //当1，2，3在2的时候保持
				// 	case 0:
				// 		if (this.currentPgeNumber < 1) {
				// 			this.currentPgeNumber += 1
				// 		}
				// 		this.chaptersArr.shift() //删除第一个
				// 		let newArr = this.chaptersArr.map(item => item.chapterIndex)
				// 		let lastIndex = newArr.lastIndexOf(this.currentChapterIndex)
				// 		if (lastIndex != -1) {
				// 			this.chaptersArr.forEach((item, index) => {
				// 				if (index == lastIndex) {
				// 					item.left = -this.read_width + 'px'
				// 				} else {
				// 					item.left = "0px"
				// 				}
				// 			})
				// 		}
				// 		let addItem = JSON.parse(JSON.stringify(this.chaptersArr2[0]))
				// 		addItem.left = "0px"
				// 		this.chaptersArr.push(addItem)
				// 		break;
				// 	case 1:
				// 		this.chaptersArr.shift() //删除第一个
				// 		let addItem2 = JSON.parse(JSON.stringify(this.chaptersArr3[0]))
				// 		addItem2.left = "0px"
				// 		this.chaptersArr.push(addItem2)
				// 		break;
				// 	default:
				// 		break;
				// }
				// this.chaptersArr.forEach((item, index) => {
				// 	if (item.chapterIndex == this.currentChapterIndex)
				// 		if (index < this.currentPgeNumber) {
				// 			item.left = -this.read_width + 'px'
				// 		} else {
				// 			item.left = "0px"
				// 		}
				// })
				// console.log(this.chaptersArr)
				// this.currentPgeNumber += 1
			},
			//点击屏幕中心出现底部功能栏
			handelCoordinate(e) {
				let w = uni.getStorageSync("SystemWidth")
				let h = uni.getStorageSync("SystemHeight")
				if (w && h) {
					//屏幕中心
					if (((e.detail.x >= (w * 0.3)) && (e.detail.x <= (w * 0.7)))) {
						this.fixedShow = !this.fixedShow
					} else if (e.detail.x >= (w * 0.7)) { //屏幕右侧
						this.fixedShow = false
						this.nextPage()
					} else if (e.detail.x <= (w * 0.3)) { //屏幕左侧
						this.fixedShow = false
						this.lastPage()
					}
				}

			},
			//目录层开启
			open() {
				// console.log('open');
			},
			//关闭目录层
			close() {
				this.show = false
				console.log('close');
			},
			//目录滚动
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			//获取手机电量
			getLevel() {
				//获取当前时间
				this.currentTime = SDTime.format(new Date(), "YYYY-MM-DD HH:mm:ss").split(" ")[1].substring(0, 5)
				//获取手机电量
				let res = uni.getSystemInfoSync()
				if (res.platform === 'android' && plus) { //安卓端
					var main = plus.android.runtimeMainActivity();
					var Intent = plus.android.importClass('android.content.Intent');
					var recevier = plus.android.implements(
						'io.dcloud.feature.internal.reflect.BroadcastReceiver', {
							onReceive: (context, intent) => {
								var action = intent.getAction();
								if (action == Intent.ACTION_BATTERY_CHANGED) {
									var level = intent.getIntExtra("level", 0); //电量
									var voltage = intent.getIntExtra("voltage", 0); //电池电压
									var temperature = intent.getIntExtra("temperature",
										0); //电池温度
									//如需获取别的，在这里继续写，此代码只提供获取电量
									// + %
									this.phoneElectric = level
								}
							}
						});
					var IntentFilter = plus.android.importClass('android.content.IntentFilter');
					var filter = new IntentFilter(Intent.ACTION_BATTERY_CHANGED);
					main.registerReceiver(recevier, filter);
				} else if (res.platform === 'ios' && plus) { //ios端
					var UIDevice = plus.ios.import("UIDevice");
					var dev = UIDevice.currentDevice();
					if (!dev.isBatteryMonitoringEnabled()) {
						dev.setBatteryMonitoringEnabled(true);
					}
					// 电量 *100 +%
					var level = dev.batteryLevel();
					this.phoneElectric = level
				}
			},
			//字体间距
			changeLetterSpace(val) {
				if (val == '+') {
					this.letterSpace += 1
				} else if (val == '-') {
					this.letterSpace -= 1
				}
				uni.setStorageSync("letterSpace", this.letterSpace)
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.hbh_smart').fields({
						size: true,
						scrollOffset: true
					}, data => {
						let beforeProportion = this.cus / (this.chaptersArr.length - 1)
						this.chapterSplitPage(data.height)
					}).exec();
				})
			},
			//行间距
			changeLineHeight(val) {
				if (val == '+') {
					this.lineHeightIndex += 1
				} else if (val == '-') {
					this.lineHeightIndex -= 1
				}
				uni.setStorageSync("lineHeightIndex", this.lineHeightIndex)
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.hbh_smart').fields({
						size: true,
						scrollOffset: true
					}, data => {
						let beforeProportion = this.cus / (this.chaptersArr.length - 1)
						this.chapterSplitPage(data.height)
					}).exec();
				})
			},
			//增减字体大小
			changeFontSize(val) {
				if (val == '+') {
					this.fontSize += 1
				} else if (val == '-') {
					this.fontSize -= 1
				}
				uni.setStorageSync("FontSize", this.fontSize)
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.hbh_smart').fields({
						size: true,
						scrollOffset: true
					}, data => {
						let beforeProportion = this.cus / (this.chaptersArr.length - 1)
						this.chapterSplitPage(data.height)
					}).exec();
				})
			},
			//底部功能栏
			handel(val) {
				//点击其他功能关闭更多设置弹窗
				if (val != 3) {
					this.$refs.popup.close()
				}
				switch (val) {
					case 0:
						this.show = !this.show
						break;
					case 1:
						this.background = '#000'
						this.fontColor = "#fff"
						uni.setStorageSync("BACKGROUNDCOLOR", '#000');
						uni.setStorageSync("Color", this.fontColor)
						break;
					case 2:
						this.background = '#fff'
						this.fontColor = "#000"
						uni.setStorageSync("BACKGROUNDCOLOR", '#fff');
						uni.setStorageSync("Color", this.fontColor)
						break;
					case 3:
						this.show = false
						this.$refs.popup.open(this.type);
						break;
					default:
				}
			},
			//调整屏幕亮度
			sliderChange(e) {
				this.screenLight = e.detail.value
				uni.setScreenBrightness({
					value: this.screenLight / 100,
					success: () => {
						uni.setStorageSync("SCREENLIGHT", this.screenLight)
					}
				});
			},
			//关闭更多设置弹窗
			closePopup() {
				this.$refs.popup.close()
				this.fixedShow = false
			},
			//改变阅读背景色
			handelColor(val) {
				this.fontColor = "#000"
				this.background = val
				uni.setStorageSync("BACKGROUNDCOLOR", val)
				uni.setStorageSync("Color", this.fontColor)
				this.cardList.map(item => item.flag = false)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.novelBox {
		height: 100vh;
		overflow: hidden;
		position: relative;
		display: flex;
		flex-direction: column;

		.topFiexdBox {
			position: fixed;
			top: var(--status-bar-height);
			left: 0rpx;
			width: 100%;
			height: 50rpx;
			display: flex;
			padding: 0 30rpx;
			box-sizing: border-box;

			.leftBack {
				overflow: hidden;
				display: flex;
				align-items: center;
				font-size: 30rpx;

				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 10rpx;
				}
			}
		}

		.endText {
			position: fixed;
			z-index: 20;
			width: 100%;
			left: 0rpx;
			bottom: 0rpx;
			color: #aaaa7f;
			font-size: 30rpx;
			height: 50px;
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			padding-bottom: 10px;
			padding: 0 15px;
			box-sizing: border-box;

			.endLeft {
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.endRight {
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				text:nth-of-type(1) {
					margin-right: 10px;
				}

				.ectrle {
					width: 40rpx;
					height: 20rpx;
					border: 2rpx solid #c2c2c2;
					box-sizing: border-box;
					display: flex;

					.realLight {
						height: 100%;
						background-color: #93936e;
					}
				}
			}
		}

		.mainBox {
			flex: 1;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			box-sizing: border-box;

			.content {
				width: 100%;
				position: relative;
				overflow: hidden;

				.realOneHtml {
					position: absolute;
					top: 0px;
					width: 100%;
					height: 100%;

					.splitBox {
						height: 100%;
						width: 100%;
						position: relative;
						overflow-y: hidden;

						.childBox {
							width: 100%;
						}
					}
				}

				.nextShamPage {
					position: absolute;
					top: 0px;
					width: 100%;
					height: 100%;

					.splitBox {
						height: 100%;
						width: 100%;
						position: relative;
						overflow-y: hidden;

						.childBox {
							width: 100%;
						}
					}
				}

				.realTwoHtml {
					position: absolute;
					z-index: -100;
					top: 0px;
					left: 0px;
					width: 100%;
					height: 100%;
					background-color: red;

					.scroll-Y {
						height: 100%;
						width: 100%;

						.hbh_smart {}
					}
				}
			}


		}


	}

	.tipTop {
		height: 80rpx;
		line-height: 80rpx;

	}


	@mixin flex {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	.popup-content {
		@include flex;
		height: 800rpx;
		border-radius: 20rpx;

		.topBox {
			width: 100%;
			font-size: 30rpx;

			.font {
				height: 100rpx;
				overflow: hidden;
				display: flex;
				align-items: center;
				padding: 0 30rpx;
				box-sizing: border-box;

				image {
					width: 36rpx;
					height: 36rpx;
					margin: 0 20rpx;
				}

				text:nth-of-type(2) {
					width: 100rpx;
					text-align: center;
				}

				image:nth-of-type(1) {
					width: 33rpx;
					height: 33rpx;
				}

			}

			.font2 {
				height: 100rpx;
				overflow: hidden;
				display: flex;
				align-items: center;
				padding: 0 30rpx;
				box-sizing: border-box;

				image {
					width: 36rpx;
					height: 36rpx;
					margin: 0 20rpx;
				}

				text:nth-of-type(2) {
					width: 100rpx;
					text-align: center;
				}

				image:nth-of-type(1) {
					width: 33rpx;
					height: 33rpx;
				}

			}

			.twoBtn {
				height: 100rpx;
				overflow: hidden;
				display: flex;
				align-items: center;
				padding: 0 30rpx;
				box-sizing: border-box;
			}

			.bcg {
				height: 100rpx;
				display: flex;
				align-items: center;
				padding: 0 30rpx;
				box-sizing: border-box;

				.bcg_right {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.bcg_color {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						box-sizing: border-box;
					}
				}
			}

			.off {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				height: 100rpx;

				text {
					margin-right: 50rpx;
					font-size: 30rpx;
				}
			}
		}

	}




	.Card {
		position: fixed;
		z-index: 10076; //必须设这么高，不然弹窗控制错乱
		bottom: 0rpx;
		left: 0rpx;
		width: 100%;
		height: 200rpx;
		display: flex;
		// background-color: red !important;

		.child {
			width: 25%;
			height: 200rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 36rpx;
				height: 36rpx;
				margin-bottom: 12rpx;
			}

			.hbh2 {
				width: 44rpx;
				height: 44rpx;
				margin-bottom: 4rpx;
			}
		}
	}
</style>